import React from 'react'
import { Modal, Button, Divider } from 'antd';
import styles from '../../styles/home/detailMessage.scss'
import { handleTimeStamp, handleCourse, getToken } from '../common/util';
import useStatus from '../hooks/useStatus';
import { axiosConfig, backIP, success, error } from '../common/config';
import axios from 'axios'

export default function DetailMessage({ visible, setVisible, detailInfo }) {
    const isCheck = useStatus((detailInfo && detailInfo.status) || '审核失败')
    const handleCancel = () => {
        setVisible(false)
    };
    const handleStatusRequest = async (status: number) => {
        const token: string = getToken();
        const { data: res }: { data: axiosConfig } = await axios({
            url: `${backIP}/status`,
            method: 'post',
            data: {
                info_id: detailInfo.info_id,
                status,
            },
            headers: { Authorization: token }
        })
        if (res.code === 0) {
            success(res.message)
            setVisible(false)
        } else {
            error(res.message)
        }
    }
    return (
        <Modal
            visible={visible}
            title={(detailInfo && detailInfo.class_name) || 'Title'}
            width={1000}
            onCancel={handleCancel}
            footer={[]}
        >
            {
                detailInfo
                    ? <>
                        <div className={styles.main}>
                            <div className={styles.section}>
                                <p>
                                    <span className={styles.prefix}>预约时间：</span>
                                    {handleTimeStamp(detailInfo.class_time)}
                                </p>
                                <p>
                                    <span className={styles.prefix}>申请时间：</span>
                                    {detailInfo.borrow_year}-{detailInfo.borrow_month}-{detailInfo.borrow_day}
                                </p>
                                <p>
                                    <span className={styles.prefix}>课时：</span>
                                    {handleCourse(detailInfo.course)}
                                </p>
                                <p>
                                    <span className={styles.prefix}>座位数：</span>
                                    {detailInfo.seat_number}
                                </p>
                                <p>
                                    <span className={styles.prefix}>楼：</span>
                                    {detailInfo.house}
                                </p>
                                <p>
                                    <span className={styles.prefix}>层数：</span>
                                    {detailInfo.floor}
                                </p>
                            </div>
                            <div className={styles.section}>
                                <p>
                                    <span className={styles.prefix}>申请人：</span>
                                    {detailInfo.user.real_name}
                                </p>
                                <p>
                                    <span className={styles.prefix}>学号：</span>
                                    {detailInfo.user.number}
                                </p>
                                <p>
                                    <span className={styles.prefix}>学院：</span>
                                    {detailInfo.user.college}
                                </p>
                                <p>
                                    <span className={styles.prefix}>年级：</span>
                                    {detailInfo.user.grade}
                                </p>
                                <p>
                                    <span className={styles.prefix}>班级：</span>
                                    {detailInfo.user.class}
                                </p>
                                <p>
                                    <span className={styles.prefix}>身份：</span>
                                    {detailInfo.user.identify}
                                </p>
                            </div>
                        </div>
                        <Divider />
                        <div className={styles.main}>
                            <div>
                                <p><span className={styles.prefix}>身份证明：</span></p>
                                <img src={detailInfo.certificate} alt="" className={styles.img} />
                            </div>
                            <p className={styles.section}>
                                <span className={styles.prefix}>申请理由：</span>
                                {detailInfo.information}
                            </p>
                        </div>
                        {
                            isCheck
                                ? <div className={styles.btnGroup}>
                                    <Button
                                        type="primary"
                                        onClick={() => { handleStatusRequest(1) }}
                                        className={styles.btn}
                                    >
                                        同意借用教室
                                    </Button>
                                    <Button onClick={handleCancel} className={styles.btn}>
                                        待定
                                    </Button>
                                    <Button
                                        type="danger"
                                        className={styles.btn}
                                        onClick={() => { handleStatusRequest(2) }}
                                    >
                                        驳回请求
                                    </Button>
                                </div>
                                : null
                        }

                    </>
                    : <div>无详细信息</div>
            }
        </Modal>
    )
}
